<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>迟到的作业</title>

   <style>
      *li {
         display: inline-block;
      }

      .red {
         text-decoration: none;

      }

      a:hover {
         color: aquamarine;

      }

      tr:nth-child(1) {
         background-color:red;
      }

      tr:nth-child(2) {
         background-color:green;
      }

      tr:nth-child(3) {
         background-color: blue;
      }
   .red{
      color: orange;
   }
   .rea{
      color: brown;
   }
    
   .dav{
      text-align: center;
   }
   .oo{
      font-size: 10px;
      font-weight: 200;
      text-align: right;
   }
   </style>



</head>

<body>
   <header>
      <ul>
         <li><a href="https://www.baidu.com" class="red">瑞士</a></li>
         <li><a href="https://www.baidu.com" class="red">瑞典</a></li>
         <li><a href="https://www.baidu.com" class="red">德国</a></li>
         <li><a href="https://www.baidu.com" class="red">法国</a></li>
         <li><a href="https://www.baidu.com" class="red">英国</a></li>
      </ul>
   </header>
   <main>
      <table border="0">
         <tr>
            <td class="red">日本</td>
            <td class="rea">韩国</td>
         </tr>
         <tr>
            <td class="red">新加坡</td>
            <td class="rea">马来西亚</td>
         </tr>
         <tr>
            <td class="red">加拿大</td>
            <td class="rea">美国</td>
         </tr>

      </table>
       
      <div class="dav">
         <img src="img1/src=http___lmg.jj20.com_up_allimg_4k_s_02_21092423253S512-0-lp.jpg&refer=http___lmg.jj20.webp" width="300" height="400">
      </div>
      <div class="dav">
         <img src="img1/src=http___pic1.win4000.com_wallpaper_2018-05-30_5b0e6999962e7.jpg&refer=http___pic1.win4000.webp" width="300" height="400">
      </div>
      <div>
         <p class="dav">
            芝士圣米歇尔山
         </p>
      </div>

      <div class="dav">
         <img src="img1/u=3312224105,2248502666&fm=253&fmt=auto&app=138&f=JPEG.jpg" width="300" height="400">
      </div>
      <div class="dav">
         <p>
            芝士罗斯福
         </p>
      </div>
      <div class="dav">
         <img src="img1/u=559837806,3131501571&fm=253&fmt=auto&app=120&f=JPEG.jpg" width="300" height="400">
      </div>
      <div class="dav">
         <p>
            芝士甘地
         </p>
      </div>
   </main>
   <footer>
      <p class="oo">本迟到的作业由某某菜鸟提供</p>
   </footer>


</body>

</html>